<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜单权限的练习</title>
  </head>

  <body>
    <script>
      //常量路由 ;全部用户都可以访问的路由
      const constantRouter = [
        //登录页面路由
        {
          path: '/login',
          component: () => import('@/views/login/index.vue'),
          name: 'login',
          meta: {
            title: '登录', //路由菜单标题
            hidden: true, //路由标题是否隐藏  true 隐藏  false:不隐藏
            icon: 'Promotion', //菜单左侧文字图标
          },
        },
        // 登录成功之后展示数据的路由
        {
          path: '/',
          // component: import('@/views/home/index.vue'),
          component: () => import('@/layout/index.vue'),
          name: 'layout',
          meta: {
            title: 'layout',
            hidden: false,
            icon: 'Avatar',
          },
          redirect: '/home',
          children: [
            {
              path: '/home',
              component: () => import('@/views/home/index.vue'),
              meta: {
                title: '首页', //路由菜单标题
                hidden: false,
                icon: 'HomeFilled',
              },
            },
          ],
        },
        //数据大屏路由
        {
          path: '/screen',
          component: () => import('@/views/screen/index.vue'),
          name: 'Screen',
          meta: {
            title: '数据大屏', //数据大屏
            hidden: false,
            icon: 'Platform',
          },
        },
      ]
      //异步路由 ;用户指定的人有这个路由,有的人没有这样的路由 (动态追加的异步路由)
      const asyncRouter = [
        //权限管理路由
        {
          path: '/acl',
          component: () => import('@/layout/index.vue'),
          name: 'Acl',
          meta: {
            title: '权限管理',
            hidden: false,
            icon: 'Lock',
          },
          redirect: '/acl/user',
          children: [
            {
              path: '/acl/user',
              component: () => import('@/views/acl/user/index.vue'),
              name: 'User',
              meta: {
                title: '用户管理',
                // hidden: false,
                icon: 'UserFilled',
              },
            },
            {
              path: '/acl/role',
              component: () => import('@/views/acl/role/index.vue'),
              name: 'Role',
              meta: {
                title: '角色管理',
                // hidden: false,
                icon: 'Tools',
              },
            },
            {
              path: '/acl/permission',
              component: () => import('@/views/acl/permission/index.vue'),
              name: 'Permission',
              meta: {
                title: '菜单管理',
                // hidden: false,
                icon: 'Grid',
              },
            },
          ],
        },
        //商品,平台属性管理
        {
          path: '/product',
          component: () => import('@/layout/index.vue'),
          name: 'Product',
          meta: {
            title: '商品管理',
            hidden: false,
            icon: 'Goods',
          },
          redirect: '/product/trademark',
          children: [
            {
              path: '/product/trademark',
              component: () => import('@/views/product/trademark/index.vue'),
              name: 'Trademark',
              meta: {
                title: '品牌管理',
                // hidden: false,
                icon: 'ShoppingCartFull',
              },
            },
            {
              path: '/product/attr',
              component: () => import('@/views/product/attr/index.vue'),
              name: 'Attr',
              meta: {
                title: '属性管理',
                // hidden: false,
                icon: 'Suitcase',
              },
            },
            {
              path: '/product/spu',
              component: () => import('@/views/product/spu/index.vue'),
              name: 'Spu',
              meta: {
                title: 'SPU管理',
                // hidden: false,
                icon: 'Calendar',
              },
            },
            {
              path: '/product/sku',
              component: () => import('@/views/product/sku/index.vue'),
              name: 'Sku',
              meta: {
                title: 'SKU管理',
                // hidden: false,
                icon: 'Present',
              },
            },
          ],
        },
      ]
      //任务路由 任何人都能访问到的路由
      const anyRouter = [
        //404
        {
          path: '/404',
          component: () => import('@/views/404/index.vue'),
          name: '404',
          meta: {
            title: '404', //路由菜单标题
            hidden: true,
            icon: 'StarFilled',
          },
        },
        //重定向
        {
          path: '/:pathMatch(.*)*',
          redirect: '/404',
          name: 'Any',
          meta: {
            title: '任意路由', //路由菜单标题
            hidden: true,
            icon: 'Histogram',
          },
        },
      ]
      // 硅谷333 :routes =  ["Product","Trademark","Sku"]
      let guigu333 = ['Product', 'Trademark', 'Sku']
      function filterRouter(asyncRouter, routes) {
        return asyncRouter.filter((item) => {
          if (routes.includes(item.name)) {
            if (item.children && item.children.length > 0) {
              //过滤二级路由时候将返回结果重新赋值给一级
              item.children = filterRouter(item.children, guigu333)
            }
            return true
          }
        })
      }
      let guigu333result = filterRouter(asyncRouter, guigu333)
      console.log('object', guigu333result)
      console.log(
        [...anyRouter, ...constantRouter, ...guigu333result],
        'guigu333result',
      )

      let guigu444 = ['Product', 'Sku']
    </script>
  </body>
</html>
